<template>
    <div class="forum-list-wrap">
        <template v-if="list.length > 0">
            <div class="list">
                <NoticeItem v-for="(item, index) in list" :item="item" :key="index"></NoticeItem>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="paginationFun">
                </el-pagination>
            </div>
        </template>
        <el-empty v-else description="没有找到数据"></el-empty>
    </div>
</template>

<script>
import NoticeItem from "../pageComponents/notice-item.vue";

import { getNoticeList } from "@/api/notice";
export default {
    components: {
        NoticeItem,
    },
    props:{
        keyword:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            params: {
                page: 1,
                limit: 10
            },
            list: [],
            total: 0
        };
    },
    mounted() {
        this.getListFun();
    },
    methods: {
        paginationFun(page) {
            this.params.page = page
            this.getListFun()
        },
        getListFun() {
            getNoticeList({...this.params,keyword:this.keyword}).then(res => {
                if (res.code == 200) {
                    this.total = res.data.total
                    this.list = res.data.list
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
.forum-list-wrap {
    .banner {
        width: 100%;
        height: 5.5rem;

        .banner-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .m-cagegory {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 1rem;
        background: rgba(79, 138, 248, 0.1);
        margin-top: 0.4rem;
        box-sizing: border-box;
        padding: 0 0.5rem 0 0;

        .push {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 0.5rem;
            background: #4f8af8;
            border-radius: 0.1rem;
            font-size: 0.2rem;
            color: #fff;
            cursor: pointer;
            user-select: none;
        }

        .m-tab {
            display: flex;
            width: 100%;
            height: 100%;
            overflow-x: scroll;

            &::before {
                content: "";
                display: block;
                width: 0.125rem;
                height: 100%;
            }

            &::-webkit-scrollbar {
                height: 0;
                border-radius: 0.025rem;
                background: rgba(0, 0, 0, 0.1);
            }

            &::-webkit-scrollbar-thumb {
                background: #4f8af8;
            }

            .m-tab-item {
                display: flex;
                align-items: center;
                padding: 0 0.375rem;
                font-size: 0.3rem;
                color: #333;
                flex-shrink: 0;
                height: 100%;
                cursor: pointer;
                user-select: none;
            }

            .m-tab-item--active {
                font-weight: 800;
            }
        }
    }

    .list {
        padding-top: 0.5rem;
    }

    .pagination {
        display: flex;
        justify-content: center;
        padding: 0.375rem 0 1rem;
    }
}</style>